<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:include="include :: header('教材软著列表')"/>
  <!--    <style>-->


  <!--        .table-container {-->
  <!--            overflow-x: auto;-->
  <!--            position: relative;-->
  <!--        }-->

  <!--        .custom-table {-->
  <!--            width: 100%;-->
  <!--            border-collapse: collapse;-->
  <!--        }-->

  <!--        .custom-table th, .custom-table td {-->
  <!--            padding: 8px 12px;-->
  <!--            text-align: left;-->
  <!--            border: 1px solid #ddd;-->
  <!--            white-space: nowrap;-->
  <!--        }-->

  <!--        .fixed-column {-->
  <!--            position: sticky;-->
  <!--            right: 0;-->
  <!--            background-color: white;-->
  <!--            z-index: 10;-->
  <!--        }-->

  <!--        /* 状态颜色 */-->
  <!--        .state-color-green {-->
  <!--            color: #67c23a;-->
  <!--        }-->

  <!--        .state-color-yellow {-->
  <!--            color: #e6a344;-->
  <!--        }-->

  <!--        .state-color-blue {-->
  <!--            color: #2c99ff;-->
  <!--        }-->

  <!--        .state-color-black {-->
  <!--            color: #000000;-->
  <!--        }-->


  <!--    </style>-->
  <style>

    /*.table-container {*/
    /*    overflow-x: auto;*/
    /*    position: relative;*/
    /*}*/

    /*.custom-table {*/
    /*    width: 100%;*/
    /*    border-collapse: collapse;*/
    /*}*/

    /*.custom-table th, .custom-table td {*/
    /*    padding: 8px 12px;*/
    /*    text-align: left;*/
    /*    border: 1px solid #ddd;*/
    /*    white-space: nowrap;*/
    /*}*/

    /*.fixed-column {*/
    /*    position: sticky;*/
    /*    right: 0;*/
    /*    background-color: white;*/
    /*    z-index: 10;*/
    /*}*/

    /*!* 状态颜色 *!*/
    /*.state-color-green {*/
    /*    color: #67c23a;*/
    /*}*/

    /*.state-color-yellow {*/
    /*    color: #e6a344;*/
    /*}*/

    /*.state-color-blue {*/
    /*    color: #2c99ff;*/
    /*}*/

    /*.state-color-black {*/
    /*    color: #000000;*/
    /*}*/
    .del-link-button {
      background: none;
      border: none;
      color: #ff0000;
      cursor: pointer;
      font-size: inherit;
    }

    .modal-right {
      position: fixed;
      right: 0;
      margin: 0;
      height: 100%;
      display: flex;
      align-items: stretch;
    }

    .modal-right .modal-content {
      height: 100%;
      width: 70%;
      margin-left: auto;
    }

    .modal-right .but {
      position: absolute;
      right: 2%;
      bottom: 1.3%;
      background: red;
      color: white;
      border: none;
      border-radius: 4px;
    }

    .progress_inner {
      height: 80px;
      width: 100%;
      position: relative;
    }

    .progress_inner__step {
      width: 33.33%;
      font-size: 12px;
      padding: 0 5px;
      transition: all 0.4s;
      float: left;
      text-align: center;
      position: relative;
    }

    .progress_inner__step label {
      padding-top: 30px;
      display: block;
      position: relative;
      cursor: pointer;
    }

    .progress_inner__step:before {
      content: "1";
      width: 24px;
      height: 24px;
      color: #2196F3;
      background: white;
      line-height: 22px;
      border: 2px solid #2196F3;
      font-size: 12px;
      top: 0;
      border-radius: 50%;
      transition: all 0.4s;
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      font-weight: bold;
      z-index: 11;
    }

    .progress_inner__step:nth-of-type(2):before {
      content: "2";
      color: #9E9E9E;
      border-color: #9E9E9E;
    }

    .progress_inner__step:nth-of-type(3):before {
      content: "3";
      color: #9E9E9E;
      border-color: #9E9E9E;
    }

    .progress_inner__step.completed:before {
      content: "✓";
      color: #4CAF50;
      border-color: #4CAF50;
      line-height: 22px;
      font-size: 14px;
    }

    .progress_inner__step.active:before {
      color: #2196F3;
      border-color: #2196F3;
      background: white;
    }

    .progress_inner__step.pending:before {
      color: #9E9E9E;
      border-color: #9E9E9E;
      background: white;
    }

    .progress_inner__bar {
      height: 3px;
      left: 16.665%;
      right: 16.665%;
      background: #E0E0E0;
      position: absolute;
      top: 12px;
      z-index: -1;
      border-radius: 3px;
      overflow: hidden;
    }

    .progress_inner__bar--progress {
      height: 100%;
      background: #4CAF50;
      width: 0;
      transition: width 0.6s ease;
    }

    .status-text {
      color: #9E9E9E;
      font-weight: normal;
      transition: all 0.4s;
      font-size: 12px;
    }

    .status-text.active {
      color: #2196F3;
      font-weight: bold;
    }

    .status-text.completed {
      color: #4CAF50;
      font-weight: bold;
    }

    .buttons {
      margin-top: 20px;
      text-align: center;
    }

    button {
      background: #2196F3;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 3px;
      margin: 0 8px;
      cursor: pointer;
      font-weight: bold;
      transition: all 0.3s;
      font-size: 12px;
    }

    button:hover {
      background: #1976D2;
    }

    button:last-child {
      background: #9E9E9E;
    }

    button:last-child:hover {
      background: #757575;
    }

    /* 新增的流程记录样式 */
    .timeline-title {
      font-weight: bold;
      font-size: 14px;
      color: #333;
      text-align: left;
      margin: 0 0 25px 20px;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      padding-bottom: 15px;
    }

    .timeline-title::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0.5px;
      /*background: linear-gradient(to right, #e0e0e0, #a0a0a0, #e0e0e0);*/
      background: linear-gradient(to right,
      rgba(224, 224, 224, 0.8),
      rgba(224, 224, 224, 0.8),
      rgba(224, 224, 224, 0.8)); /* 添加透明度使线条更柔和 */
      box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.07);
    }

    .track-rcol {
      width: 100%;
      max-width: 500px;
      margin: 20px auto;
      /*width: 450px;*/
      /*!*border: 1px solid #eee;*!*/
      /*margin: 20px auto;*/
      /*background: transparent;*/
    }

    .track-list {
      margin: 20px;
      padding-left: 5px;
      position: relative;
    }

    .track-list ul {
      padding-left: 0;
    }

    .track-list li {
      position: relative;
      padding: 5px 0 10px 25px;
      line-height: 1.4;
      border-left: 2px solid #d9d9d9;
      color: #666;
      list-style: none;
      /*text-align: left;*/
      transition: all 0.4s ease; /* 添加过渡效果 */
    }

    .track-list li.first {
      color: #666;
      padding-top: 0;
      /*border-left-color: #fff;*/
    }

    .track-list li .node-icon {
      position: absolute;
      left: -7px;
      top: 18px;
      width: 8px; /* 调圆点*/
      height: 8px;
      background: #C0C0C0;
      border-radius: 50%;
      transition: all 0.4s ease; /* 添加过渡效果 */
      border: 2px solid #E0E0E0;
      box-sizing: content-box;
    }

    .track-list li.first .node-icon {
      background: #C0C0C0; /* 天蓝色 */
      width: 8px;
      height: 8px;
      left: -8px;
    }

    .track-list li .time {
      display: block;
      margin-bottom: 3px;
      font-size: 11px;
      color: #888;
      transition: all 0.4s ease; /* 添加过渡效果 */
    }

    .track-list li .txt {
      display: block;
      font-size: 12px;
      transition: all 0.4s ease; /* 添加过渡效果 */
    }

    /* 悬停效果 */
    .track-list li:hover {
      color: #333;
    }

    .track-list li:hover .node-icon {
      transform: scale(1.3);
      background: #ed8088;
    }

    .track-list li:hover .time {
      color: #666;
    }

    /* 新增审核状态样式 */
    .approve-status {
      margin-top: 10px;
      text-align: center;
    }

    .approve-status label {
      margin: 0 10px;
      cursor: pointer;
    }

    .approve-status input {
      margin-right: 5px;
    }

    .track-list {
      margin: 20px;
      padding-left: 5px;
      position: relative;
    }

    .track-list ul {
      padding-left: 0;
      list-style: none;
      max-height: 50vh;
      overflow-y: auto;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      background-color: #f9f9f9;
      padding: 10px;
    }

    .track-list li {
      position: relative;
      padding: 5px 0 10px 25px;
      line-height: 1.4;
      border-left: 2px solid #d9d9d9;
      color: #666;
      transition: all 0.4s ease;
    }

  </style>
</head>
<body class="gray-bg">
<div class="container-div">
  <div class="row">
<!--    <div class="col-sm-12 search-collapse"-->
<!--         shiro:hasAnyPermissions="system:Jiaocairuanzhu:hecha, system:Jiaocairuanzhu:chayue">-->
<!--      <form id="formId">-->
<!--        <div class="select-list">-->
<!--          <ul>-->
<!--            <li>-->
<!--              <label>教研室：</label>-->
<!--              <select name="jiaoyanshi" th:with="type=${@dict.getType('sys_dept')}">-->
<!--                <option value="">所有</option>-->
<!--                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
<!--              </select>-->
<!--            </li>-->
<!--            <li>-->
<!--              <label>姓名：</label>-->
<!--              <input type="text" name="xingming"/>-->
<!--            </li>-->
<!--            <li>-->
<!--              <label>教材名称：</label>-->
<!--              <input type="text" name="mingcheng"/>-->
<!--            </li>-->
<!--            <li>-->
<!--              <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--              <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </form>-->
<!--    </div>-->

    <div id="toolbar" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
      <div class="btn-group-sm" role="group" style="display: inline-flex; gap: 4px;">
        <a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:jiaocairuanzhu:add">
          <i class="fa fa-plus"></i> 添加
        </a>
<!--        <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:jiaocairuanzhu:export">-->
<!--          <i class="fa fa-download"></i> 导出-->
<!--        </a>-->
      </div>
      <div style="display: flex; align-items: center; gap: 15px; padding: 6px 36px; border-radius: 4px;">
        <th:block th:replace="include :: status-circles"/>
      </div>
    </div>
    <div class="col-sm-12 select-table table-striped">
      <div class="table-container">
        <table id="bootstrap-table" class="custom-table">
          <thead>
          <tr>
            <th>序号</th>
            <th>学院</th>
            <th>专业</th>
            <th>姓名</th>
            <th>教材名称</th>
            <th>出版时间</th>
            <th>分类</th>
            <th>负责人排名</th>
            <th>得分</th>
            <th class="fixed-column">操作</th>
          </tr>
          </thead>
          <tbody>
          <!-- 数据行将由JavaScript动态生成 -->
          </tbody>
        </table>
      </div>
    </div>


  </div>
</div>

<div class="wrapper wrapper-content fadeInRight" style="position: absolute; left: -9999px;">
  <div class="row">
    <div class="col-sm-4">
      <div class="ibox ">
        <div class="ibox-content">
          <div class="modal inmodal" id="lcjl_Moda" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-right">
              <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                  <div class="timeline-title">流程记录</div>

                  <!-- 原有的流程进度条部分 -->
                  <div>
                    <div class='progress_inner'>
                      <div class='progress_inner__step active' id='step-1'>
                        <label for='step-1'><span class="status-text active">待提交</span></label>
                      </div>
                      <div class='progress_inner__step pending' id='step-2'>
                        <label for='step-2'><span class="status-text">审核中</span></label>
                      </div>
                      <div class='progress_inner__step pending' id='step-3'>
                        <label for='step-3'><span class="status-text">已完成</span></label>
                      </div>
                      <div class='progress_inner__bar' style="z-index: 10">
                        <div class='progress_inner__bar--progress' id='progress-bar'></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal-body">
                  <!-- 流程记录标题 - 放在左上角 -->


                  <!-- 流程记录内容 - 放在流程图下方 -->
                  <div class="track-rcol">
                    <div class="track-list">
                      <ul id="event-list">
                        <li class="first">
                          <i class="node-icon"></i>
                          <span class="time" id="current-time">等待操作...</span>
                          <span class="txt">[新增] - 哈尔滨信息工程学院</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-white but" data-dismiss="modal">关闭</button>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<th:block th:include="include :: footer"/>
<script th:inline="javascript">
  var editFlag = [[${@permission.hasPermi('system:jiaocairuanzhu:edit')}]];
  var removeFlag = [[${@permission.hasPermi('system:jiaocairuanzhu:remove')}]];
  var xueyuanDatas = [[${@dict.getType('sys_xueyuan')}]];
  // var leixingDatas = [[${@dict.getType('sys_jiaocairuanzhu_leibie')}]];
  var benxiaoshifoyongshuDatas = [[${@dict.getType('sys_yes_no')}]];
  var fenleiDatas = [[${@dict.getType('sys_jiaocairuanzhu_fenlei')}]];
  var datas = [[${@dict.getType('sys_jiaocairuanzhu_zt')}]];
  var paiMingDatas = [[${@dict.getType('sys_jiaocairuanzhu_fzr')}]];
  var proFlag = [[${@permission.hasPermi('system:jiaocairuanzhu:process')}]];
  var editInfo = [[${@permission.hasPermi('system:jiaocairuanzhu:info')}]];
  var hechaFlag = [[${@permission.hasPermi('system:jiaocairuanzhu:hecha')}]];
  var createFlag = [[${@permission.hasPermi('system:jiaocairuanzhu:add')}]];
  var chayueFlag = [[${@permission.hasPermi('system:jiaocairuanzhu:chayue')}]];
  var chexiaoFlag = [[${@permission.hasPermi('system:jiaocairuanzhu:chexiao')}]];

  var prefix = ctx + "system/jiaocairuanzhu";

  $(function () {
    function initTable(options) {
      var tableId = options.id;
      options.url = getUrl(tableId);
      $.table.init(options);
    }

    function getUrl(tableId) {
      var year = localStorage.getItem("year");
      return prefix + "/list/?year=" + year;
    }

    var options = {
      url: prefix + "/list",
      createUrl: prefix + "/add",
      updateUrl: prefix + "/edit/{id}",
      removeUrl: prefix + "/remove",
      detailUrl: prefix + "/detail/{id}",
      exportUrl: prefix + "/export",
      recallUrl: prefix + "/recall/{id}",
      rowStyle: rowStyle0,
      modalName: "教材软著",
      columns: [
        {
          field: 'number',
          title: '序号',
          width: 5,
          align: 'center',
          switchable: false,
          formatter: function (value, row, index) {
            return $.table.serialNumber(index);
          }
        },
        {
          field: 'id',
          title: 'id',
          visible: false
        },
        {
          field: 'xueyuan',
          title: '学院'
        },
        {
          field: 'jiaoyanshi',
          title: '专业'
        },
        {
          field: 'xingming',
          title: '姓名'
        },
        {
          field: 'mingcheng',
          title: '教材软著名称'
        },
        // {
        //     field: 'leixing',
        //     title: '类型',
        //     formatter: function(value, row, index) {
        //         return $.table.selectDictLabel(leixingDatas, value);
        //     }
        // },
        {
          field: 'chubanshijian',
          title: '出版时间'
        },
        {
          field: 'fenlei',
          title: '分类',
          formatter: function (value, row, index) {
            return $.table.selectDictLabel(fenleiDatas, value);
          }
        },
        {
          field: 'paiming',
          title: '负责人排名',
          formatter: function (value, row, index) {
            return $.table.selectDictLabel(paiMingDatas, value);
          }
        },
        {
          field: 'jifen',
          title: '积分',
          formatter: function (value, row, index) {
            //console.log("row=",row)
            if (row.userId == row.uid) {
              return row.jifen;
            } else {
              return 0;
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          class: 'fixed-column',
          formatter: function (value, row, index) {
            var actions = [];
            var huanhang = false;
            //console.log(row);

            if (row.state == 0) {
              if (row.userId == row.uid) {
                actions.push('<a class="" href="javascript:void(0)" onclick="submitDirectly(\'' + row.id + '\')"></i>提交&nbsp;&nbsp;&nbsp;&nbsp;</a>');
                actions.push('<a class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')"></i>编辑&nbsp;&nbsp;&nbsp;&nbsp;</a>');
                actions.push('<a class="del-link-button ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i ></i>删除</a>');

              }
              huanhang = true;
            } else if (row.state == 1) {
              actions.push('<a class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/pro' + '\')"></i>批阅</a>&nbsp;&nbsp;&nbsp;&nbsp;');
              huanhang = true;
              // actions.push('<br>')
              // actions.push('<a class="" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/chakan' + '\')"></i>查看&nbsp;&nbsp;&nbsp;&nbsp;</a>');
              // actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');

            } else if ((row.state == 3 || row.state == 5 || row.state == 7) && row.userId == row.uid) {
              actions.push('<a class="' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')"></i>编辑</a>');
              huanhang = true;
            } else if (row.state == 2) {
              actions.push('<a class="' + proFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000"></i>撤回</a>');
              if (hechaFlag != 'hidden') {
                actions.push('<a class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/hecha' + '\')"></i>核查</a>');
              }
              huanhang = true;
            } else if (row.state == 4) {

              actions.push('<a class="' + hechaFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000"></i>撤回</a>');
              if (chayueFlag != 'hidden') {
                actions.push('<a class="' + chayueFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/chayue' + '\')"></i>查阅</a>');
              }
              huanhang = true;
            } else if (row.state == 6) {
              if (chayueFlag != 'hidden') {
                actions.push('<a class="' + chayueFlag + '" href="javascript:void(0)" onclick="$.operate.recallTab(\'' + row.id + '\')" style="color : #c90000"></i>撤回</a>');
                huanhang = true;
              }
            }

            if (huanhang === true) {
              actions.push('<br>'); // 只有前面有按钮时才换行

            }
            actions.push('<a class="" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/chakan' + '\')"></i>查看&nbsp;&nbsp;&nbsp;&nbsp;</a>');
            actions.push('<a  data-toggle="modal" data-target="#lcjl_Moda" onclick="showhistory(' + row.id + ',' + row.state + ')" >流程记录&nbsp;</a> ');

            return actions.join('');
          }
        }
      ]
    };

    $.table.init(options);

    window.addEventListener("storage", function (event) {
      if (event.key === "year") {
        $('#bootstrap-table').bootstrapTable('destroy');
        initTable(options);
      }
    });

    function adjustTableLayout() {
      const tableWidth = $('.table-container').width();
      const fixedColumnWidth = $('.fixed-column').width();
      const contentWidth = tableWidth - fixedColumnWidth;

      $('.custom-table').css('width', contentWidth + fixedColumnWidth + 'px');
    }

    $(window).on('resize', function () {
      adjustTableLayout();
    });

    adjustTableLayout();
  });

  function downloadFiles(id) {
    window.location.href = ctx + 'common/HXdownloadZip?id=' + id;
  }

  function rowStyle0(row, index) {
    const stateColorMap = {
      6: '#67c23a', // 完结 绿色
      3: '#e6a344', 5: '#e6a344', 7: '#e6a344', // 被驳回，草稿 黄色
      1: '#2c99ff', 2: '#2c99ff', 4: '#2c99ff', // 审核中 蓝色
      0: '#e6a344' // 草稿 黄色
      // 1: '#2c99ff', // 审核中 蓝色
      // 2: '#67c23a', // 完结 绿色
      // 3: '#e6a344', // 被驳回，草稿 黄色
      // 4: '#67c23a', // 完结 绿色
      // 5: '#e6a344', // 被驳回，草稿 黄色
      // 6: '#67c23a', // 完结 绿色
      // 7: '#67c23a', // 完结 绿色
    };

    const state = String(row.state);
    if (state in stateColorMap) {
      return {
        css: {'color': stateColorMap[state]}
      };
    }

    return {
      css: {'color': '#000000'}
    };
  }


  function showhistory(id, state) {
    updateProgressStepColor(state)
    //查询配乐记录
    $.ajax({
      url: prefix + '/bhyy/' + id,
      type: 'POST',
      data: {
        kid: id
      },
      success: function (response) {
        const eventList = document.getElementById('event-list');
        eventList.innerHTML = '';
        console.log(response.rows);
        response.rows.forEach(function (row) {
          console.log(response.rows);

          const li = document.createElement('li');
          li.innerHTML = `

                        <div class="event-item">
                            <div class="event-content">
                                <i class="node-icon"></i>
                                <span class="time" id="current-time">${row.createTime}</span>
                                <span class="txt">[${row.state}] - ${row.uname}</span>
                            </div>
                        </div>
                    `;
          eventList.insertBefore(li, eventList.firstChild);
        });
      },
      error: function () {
        alert('Failed to fetch event history.');
      }
    });
  }

  function updateProgressStepColor(state) {
    // 获取所有步骤元素
    const steps = document.querySelectorAll('.progress_inner__step');
    const progressBar = document.querySelector('.progress_inner__bar--progress');

    // 遍历所有步骤，重置样式
    steps.forEach(step => {
      step.classList.remove('active', 'completed', 'pending');
      step.querySelector('.status-text').classList.remove('active', 'completed');
    });

    // 根据 state 设置相应的步骤颜色
    if ([0, 3, 5, 7].includes(state)) {
      document.getElementById('step-1').classList.add('active');
      document.getElementById('step-1').querySelector('.status-text').classList.add('active');
      progressBar.style.width = '0';
    } else if (state === 6) {
      document.getElementById('step-1').classList.add('completed');
      document.getElementById('step-1').querySelector('.status-text').classList.add('completed');
      document.getElementById('step-2').classList.add('completed');
      document.getElementById('step-2').querySelector('.status-text').classList.add('completed');
      document.getElementById('step-3').classList.add('completed');
      document.getElementById('step-3').querySelector('.status-text').classList.add('completed');
      progressBar.style.width = '100%';
    } else if ([1, 2, 4].includes(state)) {
      document.getElementById('step-1').classList.add('completed');
      document.getElementById('step-1').querySelector('.status-text').classList.add('completed');
      document.getElementById('step-2').classList.add('completed');
      document.getElementById('step-2').querySelector('.status-text').classList.add('completed');
      progressBar.style.width = '50%';
    } else {
      // 默认情况下，所有步骤为灰色
      steps.forEach(step => {
        step.classList.add('pending');
        step.querySelector('.status-text').classList.add('pending');
      });
    }
  }


  document.addEventListener('DOMContentLoaded', function () {
    // 初始化显示当前时间
    document.getElementById('current-time').textContent = getCurrentTime();
  });

  function submitDirectly(id) {
      $.modal.confirm("确定提交吗？", function () {
          submitHandler(id, "tijiao");
      });
  }

  function submitHandler(id, urlFlag) {
    $.operate.saveTab(
      ctx + "system/jiaocairuanzhu/hxPass",
      {id: id, urlFlag: urlFlag},)
    // 手动刷新当前页的表格
    // $('#bootstrap-table').bootstrapTable('refresh');
    location.reload();


  }


</script>
</body>
</html>
